<template>
    <div id="box">
      <img
        class="logo"
        src="../../../public/headers/TB1fbVFfu3tHKVjSZSgXXX4QFXa-230-104.png"
        alt=""
      />
      <span class="area"
        ><el-dropdown>
          <span class="el-dropdown-link">
            北京<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>上海</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown></span
      >
      <div class="search-bar">
        <input
          class="search-input"
          type="text"
          v-model="input"
          placeholder="请输入演出、艺人、场馆名称"
        />
        <button class="search-button" @click="chuan()">搜索</button>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "headers2",
    data() {
      return {
        input: "",
      };
    },
    methods: {
      chuan() {
        this.$emit("search", this.input);
      },
    },
    components: {},
  };
  </script>
  
  <style scoped>
  #box {
    /* height: 200px; */
    margin: 20px auto;
    width: 1500px;
    height: 120px;
    /* border: 1px solid red; */
  }
  .search-input {
    width: 500px;
    height: 40px;
    border: 3px #ff3c1b solid;
    font-size: 16px;
  }
  .search-button {
    width: 100px;
    line-height: 40px;
    border: 3px #ff3c1b solid;
    /* border-bottom: 4px #ff3c1b solid;
    border-top: 2px #ff3c1b solid; */
    background: #ff3c1b;
    font-size: 16px;
    color: white;
  }
  .search-bar {
    position: absolute;
    left: 35%;
    /* width: 600px; */
    display: inline-block;
    border: 1px red solid;
  }
  /* #box {
    border: 1px red solid;
  } */
  .area {
    float: left;
  
    margin-left: 30px;
  }
  .logo {
    float: left;
    width: 13%;
  }
  </style>
  
  